<template>
	<view :class="['lb-picker', inline ? 'lb-picker-inline' : '']">

		<!-- 默认插槽 -->
		<view v-if="!inline" class="lb-picker-default-slot" @tap="show">
			<slot></slot>
		</view>

		<!-- 遮罩层 -->
		<view v-if="visible && showMask && !inline"
			:class="['lb-picker-mask', animation ? 'lb-picker-mask-animation' : '']" :style="{
        backgroundColor: maskBgColor,
        zIndex: zIndex - 1
      }" @tap.stop="handleMaskTap" @touchmove.stop.prevent="moveHandle">
		</view>

		<view v-if="visible || inline" :class="[
        'lb-picker-container',
        !inline ? 'lb-picker-container-fixed' : '',
        animation ? 'lb-picker-container-animation' : '',
        containerVisible ? 'lb-picker-container-show' : ''
      ]" :style="{
        borderRadius: `${radius} ${radius} 0 0`,
        zIndex: zIndex
      }">
			<view v-if="showHeader" class="lb-picker-header">

				<!-- 头部顶部插槽 -->
				<slot name="header-top"></slot>

				<view class="lb-picker-header-actions">
					<view class="lb-picker-action lb-picker-left">
						<!-- 取消 -->
						<view class="lb-picker-action-item lb-picker-action-cancel" @tap.stop="handleCancel">
							<slot v-if="$slots['cancel-text']" name="cancel-text">
							</slot>
							<text v-else class="lb-picker-action-cancel-text" :style="{ color: cancelColor }">
								{{ cancelText }}
							</text>
						</view>
					</view>

					<!-- 中间 -->
					<view class="lb-picker-action lb-picker-center" v-if="$slots['action-center']">
						<slot name="action-center"></slot>
					</view>

					<!-- 确定 -->
					<view class="lb-picker-action lb-picker-right">
						<view class="lb-picker-action-item lb-picker-action-confirm" @tap.stop="handleConfirm">
							<slot v-if="$slots['confirm-text']" name="confirm-text"> </slot>
							<text v-else class="lb-picker-action-confirm-text" :style="{ color: confirmColor }">
								{{ confirmText }}
							</text>
						</view>
					</view>
				</view>

				<!-- 头部底部插槽 -->
				<slot name="header-bottom"></slot>
			</view>

			<view class="lb-picker-content">

				<!-- 选择器顶部插槽 -->
				<slot name="picker-top"></slot>

				<view class="lb-picker-content-main" :style="{ height: pickerContentHeight }">
					<!-- loading -->
					<view v-if="loading" class="lb-picker-loading">
						<slot name="loading">
							<image class="lb-picker-loading-img"
								src="">
							</image>
						</slot>
					</view>

					<!-- 暂无数据 -->
					<view v-if="isEmpty && !loading" class="lb-picker-empty">
						<slot name="empty">
							<text class="lb-picker-empty-text" :style="{ color: emptyColor }">
								{{ emptyText }}
							</text>
						</slot>
					</view>

					<!-- 单选 -->
					<selector-picker v-if="mode === 'selector' && !loading && !isEmpty" :ref="mode" :value="value"
						:list="list" :mode="mode" :props="pickerProps" :height="pickerContentHeight" :inline="inline"
						@change="handleChange">
					</selector-picker>

					<!-- 多列联动 -->
					<multi-selector-picker v-if="mode === 'multiSelector' && !loading && !isEmpty" :ref="mode"
						:value="value" :list="list" :mode="mode" :level="level" :visible="visible" :props="pickerProps"
						:height="pickerContentHeight" :inline="inline" @change="handleChange">
					</multi-selector-picker>

					<!-- 非联动选择 -->
					<unlinked-selector-picker v-if="mode === 'unlinkedSelector' && !loading && !isEmpty" :ref="mode"
						:value="value" :list="list" :mode="mode" :visible="visible" :props="pickerProps"
						:height="pickerContentHeight" :inline="inline" @change="handleChange">
					</unlinked-selector-picker>
				</view>

				<!-- 选择器底部插槽 -->
				<slot name="picker-bottom"></slot>
			</view>
		</view>
	</view>
</template>

<script>
	const defaultProps = {
		label: 'label',
		value: 'value',
		children: 'children'
	}
	import {
		getColumns
	} from './utils'
	import SelectorPicker from './pickers/selector-picker'
	import MultiSelectorPicker from './pickers/multi-selector-picker'
	import UnlinkedSelectorPicker from './pickers/unlinked-selector-picker'
	export default {
		components: {
			SelectorPicker,
			MultiSelectorPicker,
			UnlinkedSelectorPicker
		},
		props: {
			value: [String, Number, Array],
			list: Array,
			mode: {
				type: String,
				default: 'selector'
			},
			level: {
				type: Number,
				default: 1
			},
			props: {
				type: Object
			},
			cancelText: {
				type: String,
				default: '取消'
			},
			cancelColor: String,
			confirmText: {
				type: String,
				default: '确定'
			},
			confirmColor: String,
			canHide: {
				type: Boolean,
				default: true
			},
			emptyColor: String,
			emptyText: {
				type: String,
				default: '暂无数据'
			},
			radius: String,
			columnNum: {
				type: Number,
				default: 5
			},
			loading: Boolean,
			closeOnClickMask: {
				type: Boolean,
				default: true
			},
			showMask: {
				type: Boolean,
				default: true
			},
			maskColor: {
				type: String,
				default: 'rgba(0, 0, 0, 0.4)'
			},
			dataset: Object,
			inline: Boolean,
			showHeader: {
				type: Boolean,
				default: true
			},
			animation: {
				type: Boolean,
				default: true
			},
			zIndex: {
				type: Number,
				default: 999
			},
			lei: {
				type: Number,
				default: 1
			}
		},
		data() {
			return {
				visible: false,
				containerVisible: false,
				maskBgColor: '',
				myValue: this.value,
				picker: {},
				pickerProps: Object.assign({}, defaultProps, this.props),
				pickerContentHeight: 34 * this.columnNum + 'px'
			}
		},
		computed: {
			isEmpty() {
				if (!this.list) return true
				if (this.list && !this.list.length) return true
				return false
			}
		},
		methods: {
			show() {

				if (this.inline) return
				this.visible = true
				setTimeout(() => {
					this.maskBgColor = this.maskColor
					this.containerVisible = true
				}, 20)
			},
			hide() {
				if (this.inline) return
				this.maskBgColor = ''
				this.containerVisible = false
				setTimeout(() => {
					this.visible = false
				}, 200)
			},
			handleCancel() {
				this.$emit('cancel', this.picker)
				if (this.canHide && !this.inline) {
					this.hide()
				}
			},
			handleConfirm() {
 console.log("11: " + JSON.stringify(11));
				if (this.isEmpty) {
					this.$emit('time', null)
					this.hide()
				} else {
					const picker = JSON.parse(JSON.stringify(this.picker))
					this.myValue = picker.value

					this.$emit('confirm', this.picker)

 

					this.$nextTick(() => {
						this.$refs[this.mode].isConfirmChange = true
					})
					if (this.canHide) this.hide()
				}
			},
			handleChange({
				value,
				item,
				index,
				change
			}) {
				this.picker.value = value
				this.picker.item = item
				this.picker.index = index
				this.picker.change = change
				this.picker.dataset = this.dataset || {}
				this.$emit('change', this.picker)
				this.$nextTick(() => {
					this.$refs[this.mode].isConfirmChange = false
				})
			},
			handleMaskTap() {
				if (this.closeOnClickMask) {
					this.hide()
				}
			},
			moveHandle() {},
			getColumnsInfo(value, type = 1) {
				let columnsInfo = getColumns({
						value,
						list: this.list,
						mode: this.mode,
						props: this.pickerProps,
						level: this.level
					},
					type
				)
				if (columnsInfo) {
					if (this.mode === 'selector') {
						columnsInfo.index = columnsInfo.index[0]
					}
				} else {
					columnsInfo = {}
				}
				columnsInfo.dataset = this.dataset || {}
				return columnsInfo
			}
		},
		watch: {
			value(newVal) {
				this.myValue = newVal
			},
			myValue(newVal) {
				this.$emit('input', newVal)
			},
			visible(newVisible) {
				if (newVisible) {
					this.$emit('show')
				} else {
					this.$emit('hide')
				}
			},
			props(newProps) {
				this.pickerProps = Object.assign({}, defaultProps, newProps)
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "./style/picker.scss";
</style>